<template>
  <el-table
    ref="table"
    v-loading="isLoading"
    :data="tableData"
    :max-height="tableHeight"
    style="width: 100%"
  >
    <el-table-column
      v-for="(item, index) in tableColumns"
      :key="index"
      :prop="item.key"
      :label="item.title"
      :min-width="isWidthBiger(item) ? 180 : null"
    >
      <template slot-scope="scope">
        <div v-if="item.key === 'operating'" class="btn-content">
          <el-button
            size="small"
            type="primary"
            @click="$emit('rowEdit', scope)"
          >
            编辑
          </el-button>
          <el-button
            :loading="scope.row.isDelLoading"
            size="small"
            type="danger"
            @click="rowDel(scope)"
          >
            删除
          </el-button>
        </div>
        <div
          v-else
          :class="isWidthBiger(item) && 'align-start'"
        >{{ scope.row[scope.column.property] }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    isLoading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    tableHeight: {
      type: Number,
      default: () => 0
    }
  },
  methods: {
    isWidthBiger(item) {
      return item.key === 'jdbcUrl';
    },
    rowDel(scope) {
      this.$confirm(`是否立刻删除${scope.row.datasourceName}数据源?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('rowDel', scope);
      }, () => {
        console.log('取消');
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ * {
  thead {
    th {
      border: 1px solid #EEEEEE ;
      background-color: #FAFAFA;
      > div {
        padding: 5px;
        text-align: center;
        color: #333333;
      }
    }
  }
  tbody {
    td {
      padding: 0;
    }
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
    }
  }
}

.btn-content {
  display: flex;
}

.align-start {
  width: 100%;
  padding: 10px;
}
</style>
